<template>
  <div class="capsule_container">
    <div class="cardTitle">
      <div class="inside">
        <i class="iconfont icon-qushi"></i>
        <div class="cardS">{{capsuleData.name}}</div>
      </div>
      <div class="legendClass">
        <div class="barsmall"></div>
        良品率
        </div>
    </div>
    <div class="chartStyle" ref="capsuleCharts"></div>
  </div>
</template>
// 胶囊柱图
<script>
export default {
  name: 'capsuleDiagram',
  data () {
    return {
      chartInstance: null,
      initOption: null,
      labelData: [],
      capData: []
    }
  },
  created () {},
  mounted () {
    this.initChart()
  },
  props: {
    capsuleData: {
      type: Object,
      required: true
    }
  },
  watch: {
    capsuleData: {
      handler (newVal) {
        // console.log('newVals', newVal)
        this.updateChart(newVal)
      },
      immediate: true
    }
  },
  beforeDestroy () {
    window.removeEventListener('resize', () => {
      this.chartInstance.resize()
    })
  },
  methods: {
    initChart () {
      this.initOption = {
        xAxis: {
          type: 'value',
          show: false,
          min: 0,
          max: 100
        },
        // legend: {
        //   show: true,
        //   data: [{
        //     name: '良品率',
        //     textStyle: {
        //       color: 'blue'
        //     }
        //   }]
        // },
        grid: {
          // height: '15%',
          height: '90%',
          width: '86%',
          top: '3%',
          left: '12%'
        },
        yAxis: {
          position: 'right',
          // nameLocation: 'start',
          type: 'category',
          data: this.labelData,
          axisTick: {
            show: false
          },
          axisLine: {
            // 坐标轴 轴线
            show: false // 是否显示
          },
          axisLabel: {
            color: 'rgb(242,245,252)',
            fontSize: 15,
            padding: [0, -340]
          }
        },
        series: [{
          data: this.capData,
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgb(29,57,85)',
            barBorderRadius: [20, 20, 20, 20]
          },
          label: {
            // offset: [200, -14],
            show: true
            // position: ['100%', '-20%']
          },
          itemStyle: {
            normal: {
              // 图形的形状
              barBorderRadius: [20, 20, 20, 20],
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: 'rgb(197,238,245)' },
                { offset: 1, color: 'rgb(59,195,245)' }
              ])
            }
          },
          barCategoryGap: '100%', // 柱间距离
          barWidth: '20%' // 柱条的宽度 胖瘦
        }]
      }
      this.chartInstance = this.$echarts.init(this.$refs.capsuleCharts)
      this.chartInstance.setOption(this.initOption)
      this.echartsResize()
    },
    echartsResize () {
      window.addEventListener('resize', () => {
        this.chartInstance.resize()
      })
    },
    updateChart (nal) {
      this.labelData = nal.labelData
      this.capData = nal.capData
    }
  }
}
</script>

<style scoped>
.capsule_container {
  width: 100%;
  height: 100%;


}
.chartStyle {
    height: calc(100% - 50px)
  }
  .cardTitle {
    display: flex;


  }
  .legendClass {
      margin-right: 14px;
      font-size: 14px;
      color: rgb(99, 188, 200);
      display: flex;
      align-items: center;

    }
  .inside {
      display: flex;

    }
    .barsmall {
        margin-right: 5px;
        margin-top: 3px;
        width: 11px;
        height: 4px;
        border-radius: 3px;
        background-image: linear-gradient(to right, rgb(197,238,245), rgb(59,195,245)) ;
      }
      .iconfont {
        margin-left: 5px;
        color: rgba(255, 255, 255, 0.87);
        font-size: 1.3rem;
        padding-top: 1px;
      }
      .cardS {
        margin-left: 7px;
        color: rgba(255, 255, 255, 0.87);
        font-size: 1rem;
      }
</style>
